<template>
	<section >
     <!--<a href="#" @click="sendMessage">即时通讯链接</a>-->
     <div class="wraper" @scroll="onScroll($event)">
            <div class="color-show" style="width: 100%;">
              	<!--<div class="color-item" v-for="(color,index) in colors" v-dragging="{ list: colors, item: color, group: 'color' }" v-html="color.context" :style="color.style">


                </div>-->

				<div id="" class="bg-color1"  :style="{width: '23.7%', height: '310px','margin-top':'5px','margin-left':'6px','position': 'relative'}">
				  <div class="home-chart-title chart-border">
					<div class="home-title-left" style="border-bottom:1px solid #f1f2f7">订单待办</div>
				  </div>
				  <ul class="home-chart-list">
					<li class="home-list-have">
					  <a @click="row_goOrder('1','订单待审核')" style="cursor:pointer;"><span class="home-list-word" >订单待审核</span><div class="home-chart-num"><strong>{{orderCount}}</strong>笔</div></a>
					</li>
					<li class="home-list-have">
					  <a @click="row_goOrder('2','待财务审核')"　style="cursor:pointer;"><span class="home-list-word">待财务审核</span><div class="home-chart-num"><strong>{{FinanceCount}}</strong>笔</div></a>
					</li>
					<li class="home-list-have">
					  <a @click="row_goOrder('3','待出库审核')"　style="cursor:pointer;"><span class="home-list-word">待出库审核</span><div class="home-chart-num"><strong>{{libraryCount}}</strong>笔</div></a>
					</li>
					<li class="home-list-have">
					  <a @click="row_goOrder('4','待发货确认')"　style="cursor:pointer;"><span class="home-list-word">待发货确认</span><div class="home-chart-num"><strong>{{DeliverCount}}</strong>笔</div></a>
					</li>
				  </ul>
				</div>
				<div id="" class="bg-color1"  :style="{width: '23.7%', height: '310px','margin-top':'5px','margin-left':'6px','position': 'relative'}">
					<div class="home-chart-title chart-border">
					  <div class="home-title-left" style="border-bottom:1px solid #f1f2f7">资金待办</div>
					</div>
					<ul class="home-chart-list">
					  <li class="home-list-have">
						<a @click="row_goCollection()"　style="cursor:pointer;"><span class="home-list-word" >收款待确认</span><div class="home-chart-num"><strong>{{ReceivablesCount}}</strong>笔</div></a>
					  </li>
					  <li class="home-list-have">
						<a @click="row_goRecharge()"　style="cursor:pointer;"><span class="home-list-word">充值待审核</span><div class="home-chart-num"><strong>{{RechargeCount}}</strong>笔</div></a>
					  </li>
					  <li class="home-list-have">
						<a @click="row_goChargeBack()"　style="cursor:pointer;"><span class="home-list-word">扣款待审核</span><div class="home-chart-num"><strong>{{DebitCount}}</strong>笔</div></a>
					  </li>
					</ul>
				</div>

                <div id="goodsClassification " class="bg-color1" :style="{width: '48%', height: '310px','margin-top':'5px','margin-left':'5px','position': 'relative'}" v-dragging="{ list: colors, item: color, group: 'color' }">
					<div class="home-chart-title chart-border">
						<div class="home-title-left">商品销售分布</div>
						<div class="home-filter">
							<div>
								<ul class="home-filter-time">
									<li :class="{on:goods_on}" name="firstGoods" @click="firstGoods">7天</li>
									<li :class="{on:goods_on2}" name="secondGoods" @click="secondGoods">30天</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="goods" :style="{width: '50%', height: '250px'}"></div>
					<div class="money-percent produce-sell">
						<ul class="extra-num-list" style="top: 9.29%;height: 227px;overflow: auto;">
							<li  v-for="(good,index) in goodsData">
								<span class="num-name" title="good.name">
									<i :style="{'background-color': colorArray[index]}"></i>
									 {{good.name}}
								</span>
								<span class="num-money" title="good.value">{{good.value}}</span>
								<span class="num-percent" title="good.percent">{{good.percent}}</span>
							</li>
						</ul>
					</div>
				</div>
				<div id="placeAnOrder" class="bg-color1"  :style="{width: '48%', height: '310px','margin-top':'5px','margin-left':'5px','position': 'relative'}">
					<div class="home-chart-title chart-border">
						<div class="home-title-left">下单客户数</div>
					</div>
					<div id="myPlaceAnOrder" :style="{width: '100%', height: '250px'}"></div>
					<div class="home-shape-right">
						<div class="home-right-row">
							<div><!-- react-text: 1076 -->今日<!-- /react-text --><span title="0">{{toDayPlaceAnOrder}}</span></div>
							<!--<div>--><!-- react-text: 1079 --><!--比昨日--><!-- /react-text --><!--<span class="num-positive" title="0">{{thanYesterdayPlaceAnOrder}}--><!-- /react-text --><!--</span></div>-->
						</div>
						<div class="home-right-row">
							<div><!-- react-text: 1085 -->本周<!-- /react-text --><span title="0">{{thisWeekPlaceAnOrder}}</span></div>
							<!--<div>--><!-- react-text: 1088 --><!--上周同期--><!-- /react-text --><!--<span class="num-positive" title="0">{{lastWeekPlaceAnOrder}}--><!-- /react-text --><!--</span></div>-->
						</div>
						<div class="home-right-row">
							<div><!-- react-text: 1094 -->本月<!-- /react-text --><span title="0">{{thisMonthPlaceAnOrder}}</span></div>
							<!--<div>--><!-- react-text: 1097 --><!--上月同期--><!-- /react-text --><!--<span class="num-positive" title="0">{{lastMonthPlaceAnOrder}}--><!-- /react-text --><!--</span></div>-->
						</div>
					</div>
				</div>


				<div id="collectedAmount" class="bg-color1"  :style="{width: '48%', height: '310px','margin-top':'5px','margin-left':'5px','position': 'relative'}">
					<div class="home-chart-title chart-border">
						<div class="home-title-left">收款金额</div>
					</div>
					<div id="myCollectedAmount" :style="{width: '100%', height: '250px'}"></div>
					<div class="home-shape-right">
						<div class="home-right-row">
							<div><!-- react-text: 1076 -->今日<!-- /react-text --><span title="0">{{toDayCollectedAmount}}</span></div>
							<!--<div>--><!-- react-text: 1079 --><!--比昨日--><!-- /react-text --><!--<span class="num-positive" title="0">{{thanYesterdayCollectedAmount}}<!-- /react-text --><!--</span></div>-->
						</div>
						<div class="home-right-row">
							<div><!-- react-text: 1085 -->本周<!-- /react-text --><span title="0">{{thisWeekCollectedAmount}}</span></div>
							<!--<div><!-- react-text: 1088 --><!--上周同期<!-- /react-text --><!--<span class="num-positive" title="0">{{lastWeekCollectedAmount}}<!-- /react-text --><!--</span></div>-->
						</div>
						<div class="home-right-row">
							<div><!-- react-text: 1094 -->本月<!-- /react-text --><span title="0">{{thisMonthCollectedAmount}}</span></div>
							<!--<div><!-- react-text: 1097 --><!--上月同期<!-- /react-text --><!--<span class="num-positive" title="0">{{lastMonthCollectedAmount}}<!-- /react-text --><!--</span></div>-->
						</div>
					</div>
				</div>



                <div id="orderAmount" class="bg-color1"  :style="{width: '48%', height: '310px','margin-top':'5px','margin-left':'5px'}" v-dragging="{ list: colors, item: color, group: 'color' }">
                	<div class="home-chart-title chart-border">
                		<div class="home-title-left">订单统计趋势图</div>
                		<div class="home-filter">
                			<div>
                				<ul class="home-filter-time">
	                				<li :class="{on:vue_on}" name="first" @click="first">7天</li>
	                				<li :class="{on:vue_on2}" name="second" @click="second">30天</li>
                				</ul>
                			</div>
                		</div>
                	</div>

                	<div id="myChart" :style="{width: '100%', height: '220px'}"></div>
                	<div class="home-shape-bottom">
                		<div class="home-bottom-column1">
                			<span class="bg-color4">订单数：</span>
                			<strong>{{orderNumber}}</strong>
                		</div>
                		<div class="home-bottom-column2">
                			<span class="bg-color3">订货客户数：</span>
                			<strong>{{customersNumber}}</strong>
                		</div>
                		<div class="home-bottom-column3">
                			<span class="bg-color2">订单金额：</span>
                			<strong>{{orderAmount}}</strong>
                		</div>
                	</div>
                </div>


                <div id="orderNumber" class="bg-color1"  :style="{width: '48%', height: '310px','margin-top':'5px','margin-left':'5px','position': 'relative'}">
                	<div class="home-chart-title chart-border">
                		<div class="home-title-left">订单数</div>
                	</div>
                	<div id="myOrderNumber" :style="{width: '100%', height: '250px'}"></div>
                	<div class="home-shape-right">
                		<div class="home-right-row">
                			<div><!-- react-text: 1076 -->今日<!-- /react-text --><span title="0">{{toDay}}</span></div>
                			<!--<div><!-- react-text: 1079 --><!--比昨日<!-- /react-text --><!--<span class="num-positive" title="0"><!-- react-text: 1081 --><!--+--><!-- /react-text --><!-- react-text: 1082 --><!--{{thanYesterday}}<!-- /react-text --><!--</span></div>-->
                		</div>
                		<div class="home-right-row">
                			<div><!-- react-text: 1085 -->本周<!-- /react-text --><span title="0">{{thisWeek}}</span></div>
                			<!--<div><!-- react-text: 1088 --><!--上周同期<!-- /react-text --><!--<span class="num-positive" title="0"><!-- react-text: 1090 --><!--+<!-- /react-text --><!-- react-text: 1091 --><!--{{lastWeek}}<!-- /react-text --><!--</span></div>-->
                		</div>
                		<div class="home-right-row">
                			<div><!-- react-text: 1094 -->本月<!-- /react-text --><span title="0">{{thisMonth}}</span></div>
                			<!--<div><!-- react-text: 1097 --><!--上月同期<!-- /react-text --><!--<span class="num-positive" title="0"><!-- react-text: 1099 --><!--+<!-- /react-text --><!-- react-text: 1100 --><!--{{lastMonth}}<!-- /react-text --><!--</span></div>-->
                		</div>
                	</div>
                </div>


                <div id="visitorNumber" class="bg-color1"  :style="{width: '48%', height: '310px','margin-top':'5px','margin-left':'5px','position': 'relative'}">
                	<div class="home-chart-title chart-border">
                		<div class="home-title-left">登录客户数</div>
                	</div>
                	<div id="myVisitorNumber" :style="{width: '100%', height: '250px'}"></div>
                	<div class="home-shape-right">
                		<div class="home-right-row">
                			<div><!-- react-text: 1076 -->今日<!-- /react-text --><span title="0">{{toDayVisitor}}</span></div>
                			<!--<div>--><!-- react-text: 1079 --><!--比昨日--><!-- /react-text --><!--<span class="num-positive" title="0">--><!-- react-text: 1082 --><!--{{thanYesterdayVisitor}}--><!-- /react-text --><!--</span></div>-->
                		</div>
                		<div class="home-right-row">
                			<div><!-- react-text: 1085 -->本周<!-- /react-text --><span title="0">{{thisWeekVisitor}}</span></div>
                			<!--<div>--><!-- react-text: 1088 --><!--上周同期--><!-- /react-text --><!--<span class="num-positive" title="0">--><!-- react-text: 1091 --><!--{{lastWeekVisitor}}--><!-- /react-text --><!--</span></div>-->
                		</div>
                		<div class="home-right-row">
                			<div><!-- react-text: 1094 -->本月<!-- /react-text --><span title="0">{{thisMonthVisitor}}</span></div>
                			<!--<div><!-- react-text: 1097 --><!--上月同期<!-- /react-text --><!--<span class="num-positive" title="0"><!-- react-text: 1100 --><!--{{lastMonthVisitor}}<!-- /react-text --><!--</span></div>-->
                		</div>
                	</div>
                </div>

				<div id="" class="bg-color1"  :style="{width: '23.7%', height: '310px','margin-top':'5px','margin-left':'5px','position': 'relative'}">
				  <div class="home-chart-title chart-border">
					<div class="home-title-left" style="border-bottom:1px solid #f1f2f7">通知公告</div>
				  </div>
				  <ul class="home-chart-list home-chart-inform" style="height: 260px;overflow: auto">
					<template v-for="(notice,index) in NoticeList">
					  <li class="home-list-have">
						  <div class="home-inform"><a @click="row_goDetail(notice.docListCode)"　style="cursor:pointer;"><p>{{notice.docListTitile}}</p><i>{{notice.createDateStr}}</i></a></div>
					  </li>
					</template>
				  </ul>
				</div>
		</div>
    </div>

	</section>
</template>


<script>
export default {
	data() {
		return {
			color:'',
			vue_on2:false,
			vue_on:true,
			goods_on : true,
			goods_on2 : false,
            items:[],
            pgSize:36,
            rawItems:[],
            pgNo:1,
			colors: [],
             colorShow: true,
             sevenDays:"",//横轴的天数
             amountData:"",//每天对应的订单金额
             orderNumber:"",//订单数
    	     customersNumber:"",//订货客户数
    	     orderAmount:"",//订单金额
    	     goodsData : [],
    	     goodsName :[],
    	     colorArray :['rgb(249, 104, 104)','rgb(246, 181, 90)','rgb(175, 226, 160)','rgb(53, 152, 220)','rgb(79, 84, 103)','rgb(19, 193, 159)','rgb(251, 150, 120)','rgb(150, 117, 206)','rgb(1, 192, 200)','rgb(236, 240, 243)'],
    	     orderStatisticalData:[],//7天每日订单数
	         toDay:"",//今天订单数
	         thanYesterday:"",//比昨日订单数
	         thisWeek:"",//本周订单数

	         lastWeek:"",//上周同期订单数
	         thisMonth:"",//本月订单数
	         lastMonth:"",//上月同期订单数

	         visitorData:[],//7天每日访客数
	         toDayVisitor:"",//今日访客数
	         thanYesterdayVisitor:"",//比昨日访客数
	         thisWeekVisitor:"",//本周访客数
	         lastWeekVisitor:"",//上周同期访客数
	         thisMonthVisitor:"",//本月访客数
	         lastMonthVisitor:"",//本月同期访客数

	         dataSource : [],
	         placeAnOrderData:[],//7天每日下单数
	         toDayPlaceAnOrder:"",//今日下单数
	         thanYesterdayPlaceAnOrder:"",//比昨日下单数
	         thisWeekPlaceAnOrder:"",//本周下单数
	         lastWeekPlaceAnOrder:"",//上周同期下单数
	         thisMonthPlaceAnOrder:"",//本月下单数
	         lastMonthPlaceAnOrder:"",//本月同期下单数

	         collectedAmountData:[],//7天每日收款金额
	         toDayCollectedAmount:"",//今日收款金额
	         thanYesterdayCollectedAmount:"",//比昨日收款金额
	         thisWeekCollectedAmount:"",//本周收款金额
	         lastWeekCollectedAmount:"",//上周同期收款金额
	         thisMonthCollectedAmount:"",//本月收款金额
	         lastMonthCollectedAmount:"",//本月收款金额

           /* 订单代办*/
          orderCount:"",//订单待审核
          FinanceCount:"",//待财务审核
          libraryCount:"",//待出库审核
          DeliverCount:"",//待发货审核

          /* 资金代办*/
          ReceivablesCount:"",//收款待确认
          RechargeCount:"",//充值待审核
          DebitCount:"",//扣款待审核

          //通知公告
          NoticeList : [],
		}

	},
	methods: {
    /*跳转通知公告页面*/
    row_goDetail(data){
      localStorage.setItem("docListCode",data);
      this.$router.push({path:"/portalDocListDetail"});
    },

    /*跳转收款待确认页面*/
    row_goChargeBack(){
      this.$router.push({path:"/chargeBack"});
    },

    /*跳转充值待审核页面*/
    row_goRecharge(){
      this.$router.push({path:"/recharge"});
    },

    /*跳转扣款待审核页面*/
      row_goCollection(){
      this.$router.push({path:"/collection"});
    },
    /*跳转订单页面*/
    row_goOrder(num){
      localStorage.setItem("num",num);
      this.$router.push({path:"/order"});
    },

    //通知公告
    queryNotice(){
      this.axios({
        method: 'post',
        url: "/v3/portal/docLists/queryNotice",
        data:{

        }
      }).then((res) => {
        this.NoticeList = res.data.list;//收款待确认
      }).catch((err)=>{
        this.Public.openError(this,err.response.data);
      });
    },

    //资金代办
    queryFundsRemain(){
      this.axios({
        method: 'post',
        url: "/v3//fund/merchantLists/queryFundsRemain",
        data:{

        }
      }).then((res) => {
        this.ReceivablesCount = res.data.merchantListNum.merchantListNum;//收款待确认
        this.RechargeCount = res.data.rechargeNum.rechargeNum;//充值待审核
        this.DebitCount = res.data.withdrawNum.withdrawNum;//扣款待审核
      }).catch((err)=>{
        this.Public.openError(this,err.response.data);
      });
    },


    //待发货审核
    queryDeliverCount(){
      this.axios({
        method: 'post',
        url: "/v3//sale/orders/deliveryConfirmationList",
        data:{

        }
      }).then((res) => {
        this.DeliverCount = res.data.pageTools.recordCount;
      }).catch((err)=>{
        this.Public.openError(this,err.response.data);
      });
    },

    //待出库审核
    querylibraryCount(){
      this.axios({
        method: 'post',
        url: "/v3//sale/orders/pendingDeliveryAuditList",
        data:{

        }
      }).then((res) => {
        this.libraryCount = res.data.pageTools.recordCount;
      }).catch((err)=>{
        this.Public.openError(this,err.response.data);
      });
    },

    //待财务审核
    queryFinanceCount(){
      this.axios({
        method: 'post',
        url: "/v3//sale/orders/pendingFinancialAuditList",
        data:{

        }
      }).then((res) => {
        this.FinanceCount = res.data.pageTools.recordCount;
      }).catch((err)=>{
        this.Public.openError(this,err.response.data);
      });
    },

    //订单待审核
    queryorderCount(){
      this.axios({
        method: 'post',
        url: "/v3//sale/orders/pendingOrderAuditList",
        data:{

        }
      }).then((res) => {
        this.orderCount = res.data.pageTools.recordCount;
      }).catch((err)=>{
        this.Public.openError(this,err.response.data);
      });
    },

		axiosFn: function() {
		        this.$notify({
		          message: "操作成功",
		          type: 'success',
		          duration:3000
		        });

    	},
    	/*loadData(){

    		var goodsClassification = {'context':'<div id="goodsClassification " class="bg-color1" >'+
                '	<div class="home-chart-title chart-border">'+
                '		<div class="home-title-left">商品销售分布</div>'+
                '		<div class="home-filter">'+
                ' 			<div>'+
                '				<ul class="home-filter-time">'+
	            '   				<li :class="{on:goods_on}" name="firstGoods" @click="firstGoods">7天</li>'+
	            '    				<li :class="{on:goods_on2}" name="secondGoods" @click="secondGoods">30天</li>'+
                '				</ul>'+
                '			</div>'+
                '		</div>'+
                '	</div>'+
                '	<div id="goods" style="width: 50%;height: 250px"></div>'+
                '	<div class="money-percent produce-sell">'+
                '		<ul class="extra-num-list" style="top: 9.29%;">'+
                '			<li  v-for="(good,index) in this.goodsData">'+
                '				<span class="num-name" title="good.name">'+
                '			    	<i style="background-color:colorArray[index]"></i>'+
                '			    	 {{good.name}}'+
                '				</span>'+
                '				<span class="num-money" title="good.value">{{good.value}}</span>'+
                '				<span class="num-percent" title="good.percent">{{good.percent}}</span>'+
                '			</li>'+
                '		</ul>'+
                '	</div>'+
                '</div>','style':'width:48%; height: 310px;margin-top:5px;margin-left:5px;position:relative;'};

    		var collectedAmount ={'context':'<div id="collectedAmount " class="bg-color1">'+
	               '   	<div class="home-chart-title chart-border"> '+
	               ' 		<div class="home-title-left">收款金额</div>'+
	               ' 	</div>'+
	               ' 	<div id="myCollectedAmount" style="width:100%; height:250px"></div>'+
	               ' 	<div class="home-shape-right">'+
	               ' 		<div class="home-right-row">'+
	               ' 			<div><!-- react-text: 1076 -->今日<!-- /react-text --><span title="0">'+this.toDayCollectedAmount+'</span></div>'+
	               ' 			<div><!-- react-text: 1079 -->比昨日<!-- /react-text --><span class="num-positive" title="0">'+this.thanYesterdayCollectedAmount+'<!-- /react-text --></span></div>'+
	               ' 		</div>'+
	               ' 		<div class="home-right-row">'+
	               ' 			<div><!-- react-text: 1085 -->本周<!-- /react-text --><span title="0">'+this.thisWeekCollectedAmount+'</span></div>'+
	               ' 			<div><!-- react-text: 1088 -->上周同期<!-- /react-text --><span class="num-positive" title="0">'+this.lastWeekCollectedAmount+'<!-- /react-text --></span></div>'+
	               ' 		</div>'+
	               ' 		<div class="home-right-row">'+
	               ' 			<div><!-- react-text: 1094 -->本月<!-- /react-text --><span title="0">'+this.thisMonthCollectedAmount+'</span></div>'+
	               ' 			<div><!-- react-text: 1097 -->上月同期<!-- /react-text --><span class="num-positive" title="0">'+this.lastMonthCollectedAmount+'<!-- /react-text --></span></div>'+
	               ' 		</div>'+
	               ' 	</div>'+
	               ' </div>','style':'width:48%; height: 310px;margin-top:5px;margin-left:5px;position:relative;'};
	        var placeAnOrder ={'context':'<div id="placeAnOrder" class="bg-color1">'+
	               ' 	<div class="home-chart-title chart-border">'+
	               ' 		<div class="home-title-left">下单客户数</div>'+
	               ' 	</div>'+
	               ' 	<div id="myPlaceAnOrder" style="width:100%; height:250px"></div>'+
	               ' 	<div class="home-shape-right">'+
	               ' 		<div class="home-right-row">'+
	               ' 			<div><!-- react-text: 1076 -->今日<!-- /react-text --><span title="0">'+this.toDayPlaceAnOrder+'</span></div>'+
	               ' 			<div><!-- react-text: 1079 -->比昨日<!-- /react-text --><span class="num-positive" title="0">'+this.thanYesterdayPlaceAnOrder+'<!-- /react-text --></span></div>'+
	               ' 		</div>'+
	               ' 		<div class="home-right-row">'+
	               ' 			<div><!-- react-text: 1085 -->本周<!-- /react-text --><span title="0">'+this.thisWeekPlaceAnOrder+'</span></div>'+
	               ' 			<div><!-- react-text: 1088 -->上周同期<!-- /react-text --><span class="num-positive" title="0">'+this.lastWeekPlaceAnOrder+'<!-- /react-text --></span></div>'+
	               ' 		</div>'+
	               ' 		<div class="home-right-row">'+
	               ' 			<div><!-- react-text: 1094 -->本月<!-- /react-text --><span title="0">'+this.thisMonthPlaceAnOrder+'</span></div>'+
	               ' 			<div><!-- react-text: 1097 -->上月同期<!-- /react-text --><span class="num-positive" title="0">'+this.lastMonthPlaceAnOrder+'<!-- /react-text --></span></div>'+
	               ' 		</div>'+
	               ' 	</div>'+
                   '</div>','style':'width:48%; height: 310px;margin-top:5px;margin-left:5px;position:relative;'};
            this.colors.push(goodsClassification);
	    	this.colors.push(placeAnOrder);
	    	this.colors.push(collectedAmount);
	    },*/
        handleClick(tab, event) {
        	console.log(tab, event);
	    },
	    addOk() {
	        this.addDepartment = !this.addDepartment;
	        this.$refs.ruleForm.resetFields();
	    },
	    addCancel() {
	        this.addDepartment = !this.addDepartment;
	        this.$refs.ruleForm.resetFields();
	    },
      	append:function(store, data) {
        	store.append({ id: id++, label: 'testtest', children: [] }, data);
    	},
	    remove:function(store, data) {
	        store.remove(data);
	    },
//    append(store, data) {
//      store.append({ id: id++, label: 'testtest', children: [] }, data);
//    },
//
//    remove(store, data) {
//      store.remove(data);
//    },

      renderContent(createElement, { node, data, store }) {
      	var _this = this;
        return createElement('span',[
        	createElement('span',node.label),
        	createElement('span',{attrs:{style:"float: right; margin-right: 20px"}},[
        		createElement('span',{attrs:{class:""},on:{click:function(){_this.axiosFn()}}},'修改'),
        		createElement('span',{attrs:{class:""},on:{click:function(){_this.axiosFn()}}},'置顶'),
        		createElement('span',{attrs:{class:""},on:{click:function(){_this.axiosFn()}}},'删除')
        	])
        ])
      },

    onScroll(event){
      var offsetHeight = event.currentTarget.offsetHeight,
      scrollHeight = event.target.scrollHeight,
      scrollTop = event.target.scrollTop,
      scrollBottom = offsetHeight + scrollTop
      if(scrollTop===0)
      {
        if(this.pgNo===1)
        {
          return
        }
        this.pgNo--
        this.changePgItems()
        event.target.scrollTop=offsetHeight-1
      }
      /*if(scrollBottom===scrollHeight || scrollBottom===scrollHeight+2)
      {
        if(this.pgNo==Math.ceil(this.rawItems.length/this.pgSize))
        {
          return
        }
        this.pgNo++
        this.changePgItems()
        event.target.scrollTop=1
      }*/
    },
    changePgItems(){
      var start = (this.pgNo-1) * this.pgSize,
      items = this.rawItems.slice(start,this.pgSize+((this.pgNo-1)*this.pgSize))
      this.items = items
    },
    sendMessage(){
    	window.open("../rongyun/rongyun.vue");
    },
    drawLine(){
    	var that = this;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
			   //   text: '折线图堆叠'
		    },
		    color:['#9ACAE6'],
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'line',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        },
		    },
		    grid: {
		    	top: '10%',
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {}
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: this.sevenDays,
		        axisLine : {
		    		lineStyle:{
		    			 color: '#93A6B7',
						 width: 1,
						 type: 'solid'
		    		}
		    	},
		    },
		    yAxis: {
		        type: 'value',
		        nameTextStyle :{
		        	color : '#97A9BA'
		        },
		        axisLine : {
		    		lineStyle:{
		    			 color: '#93A6B7',
						 width: 1,
						 type: 'solid'
		    		}
		    	},
		    },
		    series: [
		        {
		            //name:'邮件营销',
		            type:'line',
		            stack: '总量',
		            data:this.amountData,
		            symbol: 'circle',
		        }
		    ]
        });
    },
    //得到7天的数据
    getDateFor7(){
    	this.axios({
              method: 'post',
              url: "/v3/sale/orders/listOrderForTime",
              params: {
              	"date":7
              }
        }).then((res) => {
          	var toDay = new Date();
    		var arry = new Array(7);
    		for(var i =0 ;i<7; i++){
    			 arry[i] = this.Public.formatDataTimeByDay(new Date(toDay.getTime() - 86400000*i).getTime());//得到最近7天
    		}
    		this.sevenDays = arry.reverse();//以数组反转的方式,赋给属性
    		var dataSource = res.data;
    		var orderCountsData = res.data.orderCountsData
    		var amount = new Array(7);
    		var i=0;
    		var amountDatas = dataSource.orderCountDayOfWeekMap;
    		for (var key in amountDatas){
    			if(key==arry[i]){
    				amount[i] = amountDatas[key];
    			}
    			i++;
	   		 }
    		this.amountData=amount;
    		this.orderNumber = orderCountsData[0].orderNum;
    		this.customersNumber = orderCountsData[0].orderCustomerNum;
    		this.orderAmount = orderCountsData[0].orderTotalMoney;
    		this.drawLine();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});

    },
    //得到30天的数据
    getDateFor30(){
    	this.axios({
              method: 'post',
              url: "/v3/sale/orders/listOrderForTime",
              params: {
              	"date":30
              }
        }).then((res) => {
          	var toDay = new Date();
    		var arry = new Array(30);
    		for(var i =0 ;i<30; i++){
    		 arry[i] = this.Public.formatDataTimeByDay(new Date(toDay.getTime() - 86400000*i).getTime());
    		}
    		this.sevenDays = arry.reverse();//以数组反转的方式,赋给属性
    		var dataSource = res.data;
    		var orderCountsData = res.data.orderCountsData
    		var amount = new Array(30);
    		var i=0;
    		var amountDatas = dataSource.orderCountDayOfWeekMap;
    		for (var key in amountDatas){
    			if(key==arry[i]){
    				amount[i] = amountDatas[key];
    			}
    			i++;
	   		 }
    		this.amountData=amount;
    		this.orderNumber = orderCountsData[0].orderNum;
    		this.customersNumber = orderCountsData[0].orderCustomerNum;
    		this.orderAmount = orderCountsData[0].orderTotalMoney;
    		this.drawLine();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});

    },
    //商品分类饼图
    goodsClassification(){
    	  var _this = this;
    	  let goods = this.$echarts.init(document.getElementById('goods'));
    	  goods.setOption({
    	  	 tooltip: {
		        trigger: 'item',
		        formatter: "{b}<br/>金额:{c} <br/>占比:{d}%"
		    },
		   	color:this.colorArray,
		   	 grid: {
		    	top: '3%',
		        left: '3%',
		        right: '4%',
		        containLabel: true
		    },
		    series: [
		        {
		           // name:'访问来源',
		            type:'pie',
		            radius: ['50%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: true,
		                    textStyle: {
		                        fontSize: '14',
		                        color : '#333',
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:this.goodsData,
		        }
		    ]
    	  })
    },
    //商品分类7天销售
    goodsFor7(){
    	 this.axios({
              method: 'post',
              url: "/v3/sale/orderGoodss/listfortime",
              params: {
               "date":7
              }
        }).then((res) => {
          	this.goodsData = res.data;
          	this.goodsClassification();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});
    },
    //商品分类30天销售
    goodsFor30(){
    	this.axios({
              method: 'post',
              url: "/v3/sale/orderGoodss/listfortime",
              params: {
               "date":30
              }
        }).then((res) => {
          	this.goodsData = res.data;
          	this.goodsClassification();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});
    },
    //订单数
    orderStatistical(){
    	 let myOrderNumber = this.$echarts.init(document.getElementById('myOrderNumber'));
    	 myOrderNumber.setOption ({
		    title: {
		       // text: '堆叠区域图'
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'line',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        },
		        formatter: "下单库户数:{c} "
		    },
		    color:['#F6878D'],
		    grid: {
		    	top:'8%',
		        left: '3%',
		        right: '25%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : this.sevenDays,
		            axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            nameTextStyle :{
			        	color : '#97A9BA'
			        },
			        axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    series : [
		        {
		           // name:'搜索引擎',
		            type:'line',
		            stack: '总量',
		            symbol: 'circle',
		            areaStyle: {normal: {}},
		            data:this.orderStatisticalData,
		        }
		    ]
		})
    },
    orderStatisticalSource(){
    	this.axios({
            method: 'post',
            url: "/v3/sale/orders/queryOrderNum",
            params: {
            }
        }).then((res) => {
        	var toDay = new Date();
    		var arry = new Array(7);
    		for(var i =0 ;i<7; i++){
    		 	arry[i] = this.Public.formatDataTimeByDay(new Date(toDay.getTime() - 86400000*i).getTime());//得到最近7天
    		}
    		this.sevenDays = arry.reverse();//以数组反转的方式,赋给属性
          	var order = new Array(7);
    		var i=0;
    		var dataSource = res.data;
    		var orderDatas = dataSource.orderDayOfWeekMap;
    		for (var key in orderDatas){
    			if(key==arry[i]){
    				order[i] = orderDatas[key];
    			}
    			i++;
	    	}
        	this.orderStatisticalData = order;
       	 	this.toDay=dataSource.orderNumDay.orderNumDay;	//今天
        	//this.thanYesterday=dataSource.thanYesterday;
        	this.thisWeek=dataSource.orderNumWeek.orderNumWeek;//本周
        	//this.lastWeek=dataSource.lastWeek;//上周同期
        	this.thisMonth=dataSource.orderNumMonth.orderNumMonth;//本月
        	//this.lastMonth=dataSource.lastMonth;//上月同期
        	this.orderStatistical();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});
    },
    //访客数
    visitorNumber(){
    	 let myVisitorNumber = this.$echarts.init(document.getElementById('myVisitorNumber'));
    	 myVisitorNumber.setOption ({
		    title: {
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'line',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        },
		        formatter: "访客数:{c} "
		    },
		    color:['#F8C072'],
		    grid: {
		    	top:'8%',
		        left: '3%',
		        right: '25%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : this.sevenDays,
		            axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            nameTextStyle :{
			        	color : '#97A9BA'
			        },
			        axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    series : [
		        {
		            type:'line',
		            stack: '总量',
		            symbol: 'circle',
		            areaStyle: {normal: {}},
		            data:this.visitorData,
		        }
		    ]
		})
    },
    //得到访客数
     visitorNumberSource(){
    	this.axios({
            method: 'post',
            url: "/v3/member/loginLogs/queryLoginMemberNum",
            params: {
            }
        }).then((res) => {
        	var toDay = new Date();
    		var arry = new Array(7);
    		for(var i =0 ;i<7; i++){
    		 	arry[i] = this.Public.formatDataTimeByDay(new Date(toDay.getTime() - 86400000*i).getTime());//得到最近7天
    		}
    		this.sevenDays = arry.reverse();//以数组反转的方式,赋给属性
          	var order = new Array(7);
    		var i=0;
    		var orderDatas = res.data.memberDayOfWeekMap;
    		for (var key in orderDatas){
    			if(key==arry[i]){
    				order[i] = orderDatas[key];
    			}
    			i++;
	    	}
        	this.visitorData = order;
       		this.toDayVisitor=res.data.memberNumDay.memberNumDay;	//今天
        	//this.thanYesterdayVisitor=dataSource.thanYesterday;
        	this.thisWeekVisitor=res.data.memberNumWeek.memberNumWeek;//本周
        	//this.lastWeekVisitor=dataSource.lastWeek;//上周同期
        	this.thisMonthVisitor=res.data.memberNumMonth.memberNumMonth;//本月
        	//this.lastMonthVisitor=dataSource.lastMonth;//上月同期
        	this.visitorNumber();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});
    },
    //下单客户数
    placeAnOrder(){
    	 let myPlaceAnOrder = this.$echarts.init(document.getElementById('myPlaceAnOrder'));
    	 myPlaceAnOrder.setOption ({
		    title: {
		       // text: '堆叠区域图'
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'line',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        },
		        formatter: "下单客户数:{c} "
		    },
		    color:['#F8C072'],
		    grid: {
		    	top:'8%',
		        left: '3%',
		        right: '25%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : this.sevenDays,
		            axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            nameTextStyle :{
			        	color : '#97A9BA'
			        },
			        axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    series : [
		        {
		           // name:'搜索引擎',
		            type:'line',
		            stack: '总量',
		            symbol: 'circle',
		            /*label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            },*/
		            areaStyle: {normal: {}},
		            data:this.placeAnOrderData,
		        }
		    ]
		})
    },
    //下单客户数
     placeAnOrderSource(){
    	var toDay = new Date();
    	var arry = new Array(7);
    	for(var i =0 ;i<7; i++){
    		 arry[i] = this.Public.formatDataTimeByDay(new Date(toDay.getTime() - 86400000*i).getTime());//得到最近7天
    	}
    	this.sevenDays = arry.reverse();//以数组反转的方式,赋给属性
    	this.axios({
            method: 'post',
            url: "/v3/sale/orders/placeAnOrderSource",
            params: {
            }
        }).then((res) => {
          	var order = new Array(7);
    		var i=0;
    		var orderDatas = res.data.placeAnOrderData;
    		for (var key in orderDatas){
    			if(key==arry[i]){
    				order[i] = orderDatas[key];
    			}
    			i++;
	    	}
    		this.placeAnOrderData = order;
       	 	this.toDayPlaceAnOrder=res.data.orderCustomerNumDay.toDay;	//今天
        	//this.thanYesterdayPlaceAnOrder=dataSource.thanYesterday;
        	this.thisWeekPlaceAnOrder=res.data.orderCustomerNumWeek.thisWeek;//本周
        	//this.lastWeekPlaceAnOrder=dataSource.lastWeek;//上周同期
        	this.thisMonthPlaceAnOrder=res.data.orderCustomerNumMonth.thisMonth;//本月
        	//this.lastMonthPlaceAnOrder=dataSource.lastMonth;//上月同期
        	this.placeAnOrder();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});


    },
    //收款金额
    collectedAmount(){
    	 let myCollectedAmount = this.$echarts.init(document.getElementById('myCollectedAmount'));

    	 myCollectedAmount.setOption ({
		    title: {
		       // text: '堆叠区域图'
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'line',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        },
		        formatter: "收款金额:{c} "
		    },
		    color:['#3598DC'],
		    grid: {
		    	top:'8%',
		        left: '3%',
		        right: '25%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : this.sevenDays,
		            axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            nameTextStyle :{
			        	color : '#97A9BA'
			        },
			        axisLine : {
			    		lineStyle:{
			    			 color: '#93A6B7',
							 width: 1,
							 type: 'solid'
			    		}
			    	},
		        }
		    ],
		    series : [
		        {
		            type:'line',
		            stack: '总量',
		            symbol: 'circle',
		            areaStyle: {normal: {}},
		            data : this.collectedAmountData,
		        }
		    ]
		})
    },
    //得到收款金额
     collectedAmountSource(){
    	var toDay = new Date();
    	var arry = new Array(7);
    	for(var i =0 ;i<7; i++){
    		 arry[i] = this.Public.formatDataTimeByDay(new Date(toDay.getTime() - 86400000*i).getTime());//得到最近7天
    	}
    	this.sevenDays = arry.reverse();//以数组反转的方式,赋给属性
    	this.axios({
            method: 'post',
            url: "/v3/sale/orders/listForMoney",
            params: {
            }
        }).then((res) => {
          	var order = new Array(7);
    		var i=0;
    		var dataSource = res.data;
    		var orderDatas = res.data.moneyDayOfWeekMap;
    		for (var key in orderDatas){
    			if(key==arry[i]){
    				order[i] = orderDatas[key];
    			}
    			i++;
	    	}
		 	this.collectedAmountData = order;

		 	console.log("aa="+this.toDayCollectedAmount);
		 	console.log("bb="+this.thisWeekCollectedAmount);
		    this.toDayCollectedAmount=dataSource.receivablesMoneyDay.receivablesMoneyDay;	//今天
		    //this.thanYesterdayCollectedAmount=dataSource.thanYesterday;
		    this.thisWeekCollectedAmount=dataSource.receivablesMoneyWeek.receivablesMoneyWeek;//本周
		    //this.lastWeekCollectedAmount=dataSource.lastWeek;//上周同期
		    this.thisMonthCollectedAmount=dataSource.receivablesMoneyMonth.receivablesMoneyMonth;//本月
		    //this.lastMonthCollectedAmount=dataSource.lastMonth;//上月同期
		    this.collectedAmount();
        }).catch((err)=>{
			this.Public.openError(this,err.response.data)
		});

    },

    first(){
    	this.getDateFor7();
		this.drawLine();
		this.vue_on2=false;
		this.vue_on=true;
    },
    second(){
    	this.getDateFor30();
		this.drawLine();
		this.vue_on2=true;
		this.vue_on=false;
    },
    firstGoods(){
    	this.goodsFor7();
    	this.goodsClassification();
    	this.goods_on  = true;
    	this.goods_on2  = false;
    },
    secondGoods(){
    	this.goodsFor30();
    	this.goodsClassification();
    	this.goods_on  = false;
    	this.goods_on2  = true;
    },
   },
	created(){
    /* 订单代办*/
    this.queryorderCount();
    this.queryFinanceCount();
    this.querylibraryCount();
    this.queryDeliverCount();
    //资金代办
    this.queryFundsRemain();
    /*通知公告*/
    this.queryNotice();

		this.getDateFor7();
		this.goodsFor7();

		this.orderStatisticalSource();
	    this.visitorNumberSource();
	    this.placeAnOrderSource();
	    this.collectedAmountSource();

		/*this.loadData();*/
	},
    mounted () {
       this.$dragging.$on('dragged', ({ value }) => {
    	var arr = value.list;
    	var str = "";
    	for(var i=0;i<arr.length;i++){
    		str= str +arr[i].text+","
    	}
    	str = str.substring(0,str.length-1);
    	console.log("str:"+str);
    	//DOTO 此方法用于保存最后拖拽完毕以后的结果
       });


      this.drawLine();
      this.goodsClassification();
      this.orderStatistical();
      this.visitorNumber();
      this.placeAnOrder();
     this.collectedAmount();



    }
  };
</script>

<style scoped>
@import "../../../assets/css/department-staff.css";

.home-chart-list {
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 0;
  right: 0;
}
.home-chart-list li.home-list-have {
  color: #415161;
}

.home-chart-list li {
  position: relative;
  padding: 0 20px;
  height: 25%;
  color: #96a6b6;
}
.home-chart-list span, .home-chart-num {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.home-chart-list span {
  left: 20px;
}
.home-chart-list li.home-list-have .home-chart-num {
  color: #415161;
}
.home-chart-num {
  right: 20px;
  color: #96a6b6;
}
.home-chart-num strong {
  padding-right: 10px;
  font-size: 26px;
  font-weight: 400;
}
.home-inform p {
  overflow: hidden;
  width: 100%;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.home-chart-inform .home-inform i {
  font-style: normal;
  color: #96a6b6;
}
.home-chart-list li.home-list-have a {
  display: block;
  height: 100%;
}
.home-chart-inform .home-inform {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
a:hover {
  color: #13c19f;
}

section {
  display: flex;
  flex-direction: column;
  flex: 1;
}
div.location {
  flex: 0 0 10px;
  padding: 3px 0 15px 0;
}
div.content {
  flex: 1;
  background-color: #fff;
  position: relative;
}

.fade-enter-active, .fade-leave-active {
  transition: .4s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
.slideDown-enter-active, .slideDown-leave-active {
  transition: .4s;
}
.slideDown-enter, .slideDown-leave-active {
  height: 0;
  opacity: 0;
}
.home-chart-list li:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background-color: #f1f2f7;
}

.playground {
            display: flex;
            margin-top: 4rem;
        }

        .color-show {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .color-box {

            width: 48%;
            height: 302px;
            background: #efefef;
            line-height: 6rem;
            text-align: center;
            color: #fff;
            transition: transform .3s;
            border: 2px solid #f0f0f0;
        }

        .color-box-image {
            width: 100%;
            height: 302px;
            background: #efefef;
            line-height: 6rem;
            text-align: center;
            color: #fff;
            transition: transform .3s;
            border: 2px solid #f0f0f0;
        }


        .color-box-small {
            width: 23.9%;
            height: 302px;
            background: #efefef;
            line-height: 6rem;
            text-align: center;
            color: #fff;
            transition: transform .3s;
            border: 2px solid #f0f0f0;
        }

        .color-box.dragging {
            transform: scale(1.1);
        }

        .color-box-small.dragging {
            transform: scale(1.1);
        }

        .in-out-translate-fade-enter-active, .in-out-translate-fade-leave-active {
          transition: all .5s;
        }
        .in-out-translate-fade-enter, .in-out-translate-fade-leave-active {
          opacity: 0;
        }
        .in-out-translate-fade-enter {
          transform: translate3d(100%, 0, 0);
        }
        .in-out-translate-fade-leave-active {
          transform: translate3d(-100%, 0, 0);
        }

.wraper{
  height:100vh;
  overflow-y: auto;
  box-sizing: border-box;
 }

 #myChart div{
 	background-color: #fff;
 }
/* #myChart{
 	position: relative;
 }

.home-shape-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
}*/
</style>
